<template>
    <div class="left-menu" id="left-menu">
        <sub-menu :menu-info="navTreeList" :open-keys="openTreeKeys" :turnToMainFrame="turnToMainFrame" />

        <a-menu mode="inline" @click="handleExtAppTo">
            <a-menu-item v-for="item in extAPPList" v-bind:key="item.key" :value="item.url">
                <a-icon type="desktop" />
                <span>{{ item.title }}</span>
            </a-menu-item>
        </a-menu>
    </div>
</template>

<script>
import { mapState } from "vuex";
import SubMenu from "./subMenu";
export default {
    props: ["selectedTree"],
    data() {
        return {
            selectedKeys: [],
            openTreeKeys: [],
        };
    },
    components: {
        "sub-menu": SubMenu,
    },
    computed: mapState({
        navTreeList: state => state.Navigation.navMenu,
        extAPPList: state => state.Navigation.extAppList,
    }),
    watch: {},
    methods: {
        turnToMainFrame(item) {
            this.selectedKeys = [];

            // let openkey = [];
            // openkey.push(item.key);

            // if (item.url == null) {
            //     this.$store.commit("Navigation/MU_OPENTREE_KEYS", openkey);

            //     this.$store.commit("Navigation/MU_SELECTED_KEYS", openkey);
            // }

            if (item.customDesktopTag && item.customDesktopTag == "Y") {
                if (item.customDesktopId && item.customDesktopId != "") {
                    this.$emit("handleTurnToFrame", item.url.replace(":id", item.customDesktopId));
                    //this.$router.push({ path: item.url.replace(":id", item.customDesktopId) });
                }
            } else {
                //if (item.url != null)
                this.$emit("handleTurnToFrame", item.url, item.key);
            }
        },
        handleExtAppTo(e) {
            //this.turnToMainFrame({ url: e.item.value });
        },
    },
    filters: {},
    created() {},
    mounted() {
        this.$store.dispatch("Navigation/getNavTree", { hasRootNode: false });
        this.$store.dispatch("Navigation/getExtAppList");
        //使用原生DOM为antd modal绑定事件
        // this.$nextTick(() => {
        //     setTimeout(() => {
        //         let expandIcons = document.getElementById("left-menu").getElementsByClassName("ant-menu-submenu-arrow");
        //         console.log(expandIcons);
        //         for (let i = 0; i < expandIcons.length; i++) {
        //             expandIcons[i].onclick = function(event) {
        //                 console.log(event);
        //             };
        //         }
        //     }, 200);
        // });
    },
};
</script>
